<template>
  <view v-if="datas.length > 0" class="search__history">
    <view class="search__history-header">历史搜索</view>
    <view :class="['search__history-container', `left${4 - (datas.length % 4)}`]">
      <view
        class="search__history-item"
        v-for="(item, index) in datas"
        :key="index"
        @click="handleClick(item)"
      >
        <text>{{ item }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import LazyLoadImg from "@/components/LazyLoadImg";

export default {
  props: {
    datas: {
      type: Array,
      default: () => []
    }
  },

  methods: {
    handleClick(keyword) {
      this.$emit("select", keyword);
    }
  }
};
</script>

<style lang="scss">
.search__history {
  &-header {
    width: 100%;
    padding: 10rpx 24rpx;
    font-size: 32rpx;
    color: #333;
    box-sizing: border-box;
    margin-top: 20rpx;

    &::before {
      content: " ";
      display: inline-block;
      width: 6rpx;
      height: 28rpx;
      background: #4990e2;
      vertical-align: middle;
      position: relative;
      top: -4rpx;
      margin-right: 8rpx;
    }
  }

  &-container {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10rpx 24rpx;

    &.left1::after {
      content: " ";
      width: 150rpx;
      width: calc((100vw - 64px) / 4);
    }
    &.left2::after {
      content: " ";
      width: 150rpx;
      width: calc((100vw - 64px) / 2);
    }
    &.left3::after {
      content: " ";
      width: 150rpx;
      width: calc((100vw - 64px) / 3);
    }
  }

  &-item {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 60rpx;
    padding: 0 20rpx;
    margin: 10rpx 20rpx 10rpx 0;
    height: 60rpx;
    font-size: 28rpx;
    background-color: rgb(242, 242, 242);
    color: #6b6b6b;
  }
}
</style>
